<template>
  <div class="app">
    <!-- 标题 -->
    <header>
      <router-view name="header" />
    </header>
    <!-- 主体 -->
    <main class="main-content">
      <router-view />
    </main>
    <!-- 尾部 -->
    <footer>
      <router-view name="footer" />
    </footer>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {}
  },

}
</script>
<style>
  html, body {
    height: 100%;
  }
</style>

<style lang="less" scoped>
 .app {
    height: 100%;
    display: flex;
    flex-direction: column;

    .main-content {
      flex: 1;
      overflow: auto;
    }
  }
</style>
